<template>
	<view class="content">
		<u-navbar title="提现" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff" :background="{backgroundColor:'#2A2931'}"></u-navbar>
		<view class="main">
			<view class="fcell">您可提现的金额为：{{userinfo.volley || '0.00'}}元</view>
			<u-field
				v-model="tx"
				placeholder="请输入提现金额"
				label-width="0"
				:border-bottom="false"
			>
				<text slot="right">元</text>
			</u-field>
			<view class="tips" v-html="tixianText">
			</view>
		</view>
		<view class="tab">我的提现账号</view>
		<u-cell-item :border-bottom="false" hover-class="none" icon="weixin-circle-fill" :icon-style="{'color':'rgb(0,160,233)'}" icon-size="44" :arrow="false" title="微信" :value="userinfo.zhifucount | returnname"></u-cell-item>
		<view class="tab">提现方式</view>
		<u-cell-item :border-bottom="false" hover-class="none" icon="weixin-circle-fill" :icon-style="{'color':'rgb(0,160,233)'}" icon-size="44" :arrow="false" title="微信">
			<u-icon name="checkbox-mark" color="#673AB7" size="42" slot="right-icon"></u-icon>
		</u-cell-item>
		<button class="new-btn" @click="tixian">提现</button>
		<u-keyboard ref="uKeyboard" :dot-enabled="false" :tooltip="false" @change="valChange" @backspace="backspace" mode="number" v-model="payshow">
			<view>
				<view class="u-text-center u-padding-20 money">请输入支付密码
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						mode="box" 
						:maxlength="6"
						:dot-fill="true"
						v-model="pwd"
						:disabled-keyboard="true"
					></u-message-input>
				</view>
		 </view>
		 </u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{},
				tx: '',
				rate:1,
				payshow: false,
				pwd: '',
				tixianText: ''
			}
		},
		filters:{
			returnname(val){
				if(val){
					var s1 = val.slice(0, 3);
					var s2 = val.slice(-3);
					var s = s1 + '**' + s2;
					return s;
				}
			}
		},
		onLoad() {
			this.userinfo = this.$store.state.userinfo
			this.$getPageContent(5, (res)=>{
				this.tixianText = res.body
			})
		},
		methods: {
			valChange(val){
				this.pwd += val
				if(this.pwd.length>5) return this.tixianconfirm()
			},
			backspace(){
				if (this.pwd.length) this.pwd = this.pwd.substr(0, this.pwd.length - 1)
			},
			async tixianconfirm(){
				if(this.pwd != this.userinfo.paypwd){
					this.pwd = ''
					return this.$u.toast('密码不正确')
				}else{
					this.pwd = ''
					this.payshow = false
					var userid = this.$store.state.userid
					var money = this.tx
					uni.showLoading()
					const {data:res} = await this.$Request({
						url:'apis/home/Withdraw/tiXian?money=' + money + '&method=1&userid=' + userid
					})
					uni.hideLoading()
					if (res && res.code == 200) {
						this.$u.toast('提现成功');
						this.$store.dispatch('getuserinfo').then(res=>{
							this.userinfo = res
						})
					} else {
						this.$u.toast(res.msg);
					}
				}
			},
			async tixian(){
				var money = this.tx
				if (isNaN(Number(money)) || Number(money) <= 0) {
					this.$u.toast('请输入提现金额');
					return;
				}
				if (Number(money) > this.userinfo.volley) {
					this.$u.toast('超出余额');
					return;
				}
				this.payshow = true
			},
			async getRate() {
				const {data:res} = await this.$Request({
					url:'apis/home/withdraw/rate'
				})
				if (res && res.code == 200) {
					this.rate = res.data.rate;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell{
		padding-top:16rpx;
		padding-bottom:16rpx;
	}
	/deep/.u-link{
		margin-left: 20rpx;
	}
	/deep/.u-field{
		input{
			color: #fff;
		}
	}
	/deep/.u-cell_title{
		color: rgb(168, 123, 56);
	}
	/deep/.u-cell__value{
		color: rgb(213, 157, 81);
	}
	.content {
		min-height: 100vh;
		background-color: #2A2931;
		.main{
			width: 100%;
			.fcell{
				color: rgb(213, 157, 81);
				padding: 20rpx 36rpx;
			}
			/deep/.tips{
				color: rgb(255, 255, 255)!important;
				padding: 20rpx 36rpx;
				font-size: 24rpx;
				*{
					color: rgb(255, 255, 255)!important;
				}
			}
		}
		.tab{
			margin-top: 20rpx;
			padding: 20rpx 36rpx;
			font-size: 24rpx;
			color: #757575;
		}
	}
	
</style>
